<template>
  <div class="flex-1 min-h-0" v-loading="loading">
    <template v-if="errorMessage">
      <el-result icon="error" title="Load Failed" :sub-title="errorMessage">
        <template #extra>
          <el-button type="primary" @click="$emit('retry')">Retry</el-button>
        </template>
      </el-result>
    </template>
    <template v-else>
      <el-empty v-if="!hasData" :description="emptyText || 'No Data'" />
      <slot v-else />
    </template>
  </div>
  
</template>

<script lang="ts" setup>
const props = defineProps<{
  loading: boolean;
  errorMessage?: string;
  hasData: boolean;
  emptyText?: string;
}>();

defineEmits<{
  (e: 'retry'): void;
}>();
</script>

<style scoped>
</style>


